<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Sheetsee Table Demo</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,900,400italic|Source+Code+Pro:400' rel='stylesheet' type='text/css'>
    <link rel="shortcut icon" href="../favicon.png">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.5.1/tabletop.min.js'></script>
    <script type='text/javascript' src='../js/sheetsee.js'></script>
    <link rel='stylesheet' type='text/css' href='../assets/style.css'>
  </head>
  <style>
    #Pagination {border-top: 4px solid #CCF4FF; margin: 10px 0px; padding-top: 10px; display: inline-block;}
    #Pagination a {cursor: pointer;}
    .no-pag {color: #acacac; border: none;}
    .no-pag:hover {color: #acacac;}
    input {border: none; border-bottom: 1px solid #333;margin: 10px 0px; width: 200px; font-size: 16px; padding-bottom: 6px;}
    .tHeader {padding: 8px; cursor: pointer; text-align: left;}
  </style>
  <body>
    <div class="container">
      <h1>All Pennies</h1>
      <p><em><a href="https://docs.google.com/a/github.com/spreadsheet/ccc?key=0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc&usp=drive_web#gid=0" target="_blank">spreadsheet</a></em><p>
      <input id="fullTableFilter" type="text" placeholder="filter by.."></input>
      <a class="clear">Clear</a>
      <div id="fullTable">Loading...</div>
      <p><em><a onClick='window.location="view-source:" + window.location.href'>View Source</a> // <a href="../docs/sheetsee-tables.html">View Documentation</a></em></p>

      <footer>
        <h4 id="getting-started">Getting Started</h4>
        <ul>
          <li><a href="../docs/about.html">About Sheetsee</a></li>
          <li><a href="../docs/building.html">Building Sheetsee</a></li>
          <li><a href="../docs/basics.html">Basics</a></li>
        </ul>
        <h4 id="ideas">Ideas</h4>
        <ul>
          <li><a href="../docs/templates.html">Templates</a></li>
          <li><a href="../docs/tips.html">Tips!</a></li>
        </ul>
        <h4>Demos</h4>
        <ul>
          <li><a href="./demo-table.html">Table Demo</a></li>
          <li><a href="./demo-map.html">Map Demo</a></li>
        </ul>
        <h4 id="use">Use</h4>
        <ul>
          <li><a href="../docs/sheetsee-core.html">Sheetsee-core</a></li>
          <li><a href="../docs/sheetsee-tables.html">Sheetsee-tables</a></li>
          <li><a href="../docs/sheetsee-maps.html">Sheetsee-maps</a></li>
        </ul>
        <h4 id="use">Contact</h4>
        <ul>
          <li><a href="http://www.twitter.com/jllord">@jllord</a></li>
          <li><a href="https://github.com/jlord/sheetsee.js/issues/new">File an issue</a></li>
        </ul>
        <h4><a class="home-link" href="../index.html">Home</a></h4>
      </footer>
    </div>

    <script id="fullTable_template" type="text/html">
      <table>
        <tr><th class="tHeader">City</th><th class="tHeader">Place Name</th><th class="tHeader">Year</th><th class="tHeader">Image</th></tr>
          {{#rows}}
            <tr><td>{{City}}</td><td>{{PlaceName}}</td><td>{{Year}}</td><td>{{Image}}</td></tr>
          {{/rows}}
      </table>
    </script>

    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', function() {
        var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
        Tabletop.init({key: URL, callback: showInfo, simpleSheet: true})
      })

      function showInfo (data) {
        var tableOptions = {
          "data": data,
          "pagination": 10,
          "tableDiv": "#fullTable",
          "filterDiv": "#fullTableFilter"
        }
        Sheetsee.makeTable(tableOptions)
        Sheetsee.initiateTableFilter(tableOptions)
      }
    </script>
  </body>
</html>
